<template>
  <div class="app-container">
    <avue-crud
      v-model:search="search"
      :page="page"
      :data="pageData?.data"
      :option="option"
      :table-loading="loading"
      @search-change="searchChange"
      @search-reset="searchChange"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @refresh-change="handleQuery"
      @row-del="handleDelete"
    >
      <template #user_name="{ row }">
        {{ `${row.user_name}` }}
      </template>

      <template #category="{ row }">
        {{ `${row.category.join("/")}` }}
      </template>

      <template #menu="{ size, row }">
        <el-button
          icon="el-icon-edit"
          text
          type="primary"
          :size="size"
          @click="onEditClick(row.id)"
        >
          编辑
        </el-button>
      </template>
    </avue-crud>

    <UserRevampFormItemDialog ref="userRevampFormItemDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { PageDataModel } from "@/model/page-data-model";
import revampListOptions, { UserRevampListSearch } from "./revamp-list-options";
import { UserRevampModel } from "@/model/user-revamp-model";
import RevampAPI from "@/api/revamp";
import UserRevampFormItemDialog, {
  UserRevampFormItemDialogInstance,
} from "@/components/UserRevampFormItemDialog/UserRevampFormItemDialog.vue";

defineOptions({
  name: "RevampList",
});

const userRevampFormItemDialogRef = ref<UserRevampFormItemDialogInstance>();
const search = ref<UserRevampListSearch>({
  page: 1,
});
const option = ref(revampListOptions);
const pageData = ref<PageDataModel<UserRevampModel[]>>();
const loading = ref(false);
const selectIds = ref<number[]>([]);
const page = computed(() => {
  return {
    ...pageData.value,
    layout: "total, prev, pager, next, jumper",
  };
});

/**
 * @description 查询数据
 */
async function handleQuery() {
  loading.value = true;
  RevampAPI.getPage(search.value)
    .then((res: any) => {
      pageData.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * @description 分页切换
 * @param val  当前页码
 */
function currentChange(val: number) {
  search.value.page = val;
  handleQuery();
}

/**
 * 处理搜索变化的函数
 * 当搜索条件变化时，此函数会被调用，通常用于处理搜索前的准备工作和搜索完成后的回调
 *
 * @param {Object} params - 包含搜索条件的参数对象
 * @param {Function} done - 一个回调函数，用于通知搜索操作完成
 */
function searchChange(params: Object, done: Function) {
  handleQuery().then(() => {
    done();
  });
}

// 选择改变
function selectionChange(selection: any) {
  selectIds.value = selection.map((item: any) => item.id);
}

/**
 * @description 编辑
 * @param id 用户ID
 */
function onEditClick(id: number) {
  userRevampFormItemDialogRef.value?.open(id);
}

/**
 * @description 行删除事件
 * @param row 行数据
 * @param index 行索引
 */
async function handleDelete(row: any, index: number) {
  try {
    await ElMessageBox.confirm("确认删除这条数据吗?", "警告");
    await RevampAPI.deleteRevamp(row.id);
    // 删除行数据
    if (pageData.value && Array.isArray(pageData.value.data)) {
      pageData.value.data.splice(index, 1);
    }
    ElMessage.success("删除成功");
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss" scoped></style>
